<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>UC系统监控仪表板</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/date-fns@2.29.3/index.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            line-height: 1.6;
            color: #333;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
        }

        .dashboard {
            padding: 20px;
            max-width: 1400px;
            margin: 0 auto;
        }

        .header {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border-radius: 15px;
            padding: 30px;
            margin-bottom: 30px;
            color: white;
            text-align: center;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .header h1 {
            font-size: 2.5em;
            margin-bottom: 10px;
            text-shadow: 0 2px 4px rgba(0,0,0,0.3);
        }

        .status-indicator {
            display: inline-block;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            margin-left: 10px;
            animation: pulse 2s infinite;
        }

        .status-healthy { background-color: #28a745; }
        .status-warning { background-color: #ffc107; }
        .status-critical { background-color: #dc3545; }

        @keyframes pulse {
            0% { opacity: 1; }
            50% { opacity: 0.5; }
            100% { opacity: 1; }
        }

        .metrics-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }

        .metric-card {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border-radius: 15px;
            padding: 25px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .metric-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
        }

        .metric-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }

        .metric-title {
            font-size: 1.1em;
            font-weight: 600;
            color: #666;
        }

        .metric-icon {
            font-size: 1.5em;
            color: #667eea;
        }

        .metric-value {
            font-size: 2.5em;
            font-weight: bold;
            color: #333;
            margin-bottom: 10px;
        }

        .metric-change {
            font-size: 0.9em;
            padding: 4px 8px;
            border-radius: 12px;
            display: inline-block;
        }

        .change-positive {
            background-color: #d4edda;
            color: #155724;
        }

        .change-negative {
            background-color: #f8d7da;
            color: #721c24;
        }

        .change-neutral {
            background-color: #e2e3e5;
            color: #383d41;
        }

        .charts-section {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }

        .chart-card {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border-radius: 15px;
            padding: 25px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .chart-title {
            font-size: 1.2em;
            font-weight: 600;
            color: #333;
            margin-bottom: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .chart-controls {
            display: flex;
            gap: 10px;
        }

        .time-selector {
            padding: 5px 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            background: white;
            font-size: 0.9em;
            cursor: pointer;
        }

        .time-selector:hover {
            background-color: #f8f9fa;
        }

        .alert-section {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border-radius: 15px;
            padding: 25px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            margin-bottom: 30px;
        }

        .alert-list {
            max-height: 300px;
            overflow-y: auto;
        }

        .alert-item {
            padding: 15px;
            margin-bottom: 10px;
            border-radius: 8px;
            border-left: 4px solid;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .alert-critical {
            background-color: #f8d7da;
            border-left-color: #721c24;
        }

        .alert-warning {
            background-color: #fff3cd;
            border-left-color: #856404;
        }

        .alert-info {
            background-color: #d1ecf1;
            border-left-color: #0c5460;
        }

        .alert-message {
            flex: 1;
        }

        .alert-time {
            font-size: 0.9em;
            color: #666;
        }

        .footer {
            text-align: center;
            color: rgba(255, 255, 255, 0.8);
            padding: 20px;
            font-size: 0.9em;
        }

        .loading {
            text-align: center;
            padding: 40px;
            color: #666;
        }

        .spinner {
            border: 4px solid rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            border-top: 4px solid white;
            width: 40px;
            height: 40px;
            animation: spin 1s linear infinite;
            margin: 0 auto 20px;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .refresh-btn {
            background: rgba(255, 255, 255, 0.2);
            border: 1px solid rgba(255, 255, 255, 0.3);
            color: white;
            padding: 8px 16px;
            border-radius: 8px;
            cursor: pointer;
            font-size: 0.9em;
            transition: background-color 0.3s ease;
        }

        .refresh-btn:hover {
            background: rgba(255, 255, 255, 0.3);
        }
    </style>
</head>
<body>
    <div class="dashboard">
        <div class="header">
            <h1>🏥 UC系统监控仪表板</h1>
            <p>溃疡性结肠炎智能评分系统 - 实时监控中心</p>
            <div>
                系统状态: <span id="systemStatus">检查中...</span>
                <span id="statusIndicator" class="status-indicator status-warning"></span>
            </div>
            <div style="margin-top: 15px;">
                <button class="refresh-btn" onclick="refreshDashboard()">🔄 刷新数据</button>
                <span style="margin-left: 20px; font-size: 0.9em;">最后更新: <span id="lastUpdate">--</span></span>
            </div>
        </div>

        <div class="metrics-grid">
            <div class="metric-card">
                <div class="metric-header">
                    <span class="metric-title">系统健康评分</span>
                    <span class="metric-icon">💚</span>
                </div>
                <div class="metric-value" id="healthScore">--</div>
                <div class="metric-change change-neutral">稳定运行</div>
            </div>

            <div class="metric-card">
                <div class="metric-header">
                    <span class="metric-title">活跃用户数</span>
                    <span class="metric-icon">👥</span>
                </div>
                <div class="metric-value" id="activeUsers">--</div>
                <div class="metric-change change-positive">+12.5%</div>
            </div>

            <div class="metric-card">
                <div class="metric-header">
                    <span class="metric-title">今日诊断数</span>
                    <span class="metric-icon">🔬</span>
                </div>
                <div class="metric-value" id="todayDiagnoses">--</div>
                <div class="metric-change change-positive">+8.3%</div>
            </div>

            <div class="metric-card">
                <div class="metric-header">
                    <span class="metric-title">AI推理时间</span>
                    <span class="metric-icon">🤖</span>
                </div>
                <div class="metric-value" id="inferenceTime">--</div>
                <div class="metric-change change-neutral">平均 2.3s</div>
            </div>

            <div class="metric-card">
                <div class="metric-header">
                    <span class="metric-title">系统响应时间</span>
                    <span class="metric-icon">⚡</span>
                </div>
                <div class="metric-value" id="responseTime">--</div>
                <div class="metric-change change-positive">优秀</div>
            </div>

            <div class="metric-card">
                <div class="metric-header">
                    <span class="metric-title">错误率</span>
                    <span class="metric-icon">⚠️</span>
                </div>
                <div class="metric-value" id="errorRate">--</div>
                <div class="metric-change change-neutral">0.1%</div>
            </div>
        </div>

        <div class="charts-section">
            <div class="chart-card">
                <div class="chart-title">
                    诊断趋势
                    <div class="chart-controls">
                        <select class="time-selector" id="diagnosisTimeRange">
                            <option value="24h">24小时</option>
                            <option value="7d">7天</option>
                            <option value="30d">30天</option>
                        </select>
                    </div>
                </div>
                <canvas id="diagnosisTrendChart"></canvas>
            </div>

            <div class="chart-card">
                <div class="chart-title">
                    系统性能
                    <div class="chart-controls">
                        <select class="time-selector" id="performanceTimeRange">
                            <option value="1h">1小时</option>
                            <option value="6h">6小时</option>
                            <option value="24h">24小时</option>
                        </select>
                    </div>
                </div>
                <canvas id="performanceChart"></canvas>
            </div>

            <div class="chart-card">
                <div class="chart-title">
                    用户活动
                    <div class="chart-controls">
                        <select class="time-selector" id="activityTimeRange">
                            <option value="today">今天</option>
                            <option value="week">本周</option>
                            <option value="month">本月</option>
                        </select>
                    </div>
                </div>
                <canvas id="userActivityChart"></canvas>
            </div>

            <div class="chart-card">
                <div class="chart-title">
                    AI准确性
                    <div class="chart-controls">
                        <select class="time-selector" id="accuracyTimeRange">
                            <option value="week">本周</option>
                            <option value="month">本月</option>
                            <option value="quarter">本季度</option>
                        </select>
                    </div>
                </div>
                <canvas id="accuracyChart"></canvas>
            </div>
        </div>

        <div class="alert-section">
            <div class="chart-title">
                🚨 系统告警
                <span style="font-size: 0.9em; color: #666;">最近24小时</span>
            </div>
            <div class="alert-list" id="alertList">
                <div class="loading">
                    <div class="spinner"></div>
                    <p>加载告警信息...</p>
                </div>
            </div>
        </div>

        <div class="footer">
            <p>© 2024 UC系统监控仪表板 | 基于Claude Code构建 | 医疗级AI系统</p>
        </div>
    </div>

    <script>
        // 全局变量
        let dashboardData = {
            systemHealth: 95,
            activeUsers: 0,
            todayDiagnoses: 0,
            averageInferenceTime: 2.3,
            averageResponseTime: 120,
            errorRate: 0.1,
            alerts: [],
            diagnosisData: [],
            performanceData: [],
            userActivityData: [],
            accuracyData: []
        };

        // 初始化仪表板
        function initDashboard() {
            updateSystemStatus();
            updateMetrics();
            initCharts();
            loadAlerts();
            startRealTimeUpdates();
            updateLastUpdateTime();
        }

        // 更新系统状态
        function updateSystemStatus() {
            const health = dashboardData.systemHealth;
            const statusElement = document.getElementById('systemStatus');
            const indicatorElement = document.getElementById('statusIndicator');

            if (health >= 90) {
                statusElement.textContent = '系统运行正常';
                indicatorElement.className = 'status-indicator status-healthy';
            } else if (health >= 70) {
                statusElement.textContent = '系统轻微警告';
                indicatorElement.className = 'status-indicator status-warning';
            } else {
                statusElement.textContent = '系统需要关注';
                indicatorElement.className = 'status-indicator status-critical';
            }
        }

        // 更新指标
        function updateMetrics() {
            // 生成模拟数据
            dashboardData.activeUsers = Math.floor(Math.random() * 50) + 10;
            dashboardData.todayDiagnoses = Math.floor(Math.random() * 100) + 20;
            dashboardData.averageInferenceTime = (Math.random() * 2 + 1.5).toFixed(1);
            dashboardData.averageResponseTime = Math.floor(Math.random() * 100) + 80;
            dashboardData.errorRate = (Math.random() * 0.5).toFixed(2);

            // 更新DOM
            document.getElementById('healthScore').textContent = dashboardData.systemHealth + '%';
            document.getElementById('activeUsers').textContent = dashboardData.activeUsers;
            document.getElementById('todayDiagnoses').textContent = dashboardData.todayDiagnoses;
            document.getElementById('inferenceTime').textContent = dashboardData.averageInferenceTime + 's';
            document.getElementById('responseTime').textContent = dashboardData.averageResponseTime + 'ms';
            document.getElementById('errorRate').textContent = dashboardData.errorRate + '%';
        }

        // 初始化图表
        function initCharts() {
            initDiagnosisTrendChart();
            initPerformanceChart();
            initUserActivityChart();
            initAccuracyChart();
        }

        // 诊断趋势图表
        function initDiagnosisTrendChart() {
            const ctx = document.getElementById('diagnosisTrendChart').getContext('2d');

            // 生成模拟数据
            const labels = [];
            const data = [];
            const now = new Date();

            for (let i = 6; i >= 0; i--) {
                const date = new Date(now);
                date.setDate(date.getDate() - i);
                labels.push(date.toLocaleDateString('zh-CN', { month: 'short', day: 'numeric' }));
                data.push(Math.floor(Math.random() * 50) + 30);
            }

            new Chart(ctx, {
                type: 'line',
                data: {
                    labels: labels,
                    datasets: [{
                        label: '每日诊断数',
                        data: data,
                        borderColor: '#667eea',
                        backgroundColor: 'rgba(102, 126, 234, 0.1)',
                        borderWidth: 3,
                        tension: 0.4,
                        fill: true
                    }]
                },
                options: {
                    responsive: true,
                    plugins: {
                        legend: {
                            display: false
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            grid: {
                                color: 'rgba(255, 255, 255, 0.1)'
                            },
                            ticks: {
                                color: '#666'
                            }
                        },
                        x: {
                            grid: {
                                display: false
                            },
                            ticks: {
                                color: '#666'
                            }
                        }
                    }
                }
            });
        }

        // 性能图表
        function initPerformanceChart() {
            const ctx = document.getElementById('performanceChart').getContext('2d');

            const labels = [];
            const responseTimeData = [];
            const inferenceTimeData = [];
            const now = new Date();

            for (let i = 12; i >= 0; i--) {
                const time = new Date(now);
                time.setHours(time.getHours() - i * 2);
                labels.push(time.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' }));
                responseTimeData.push(Math.floor(Math.random() * 100) + 80);
                inferenceTimeData.push(Math.random() * 2 + 1.5);
            }

            new Chart(ctx, {
                type: 'line',
                data: {
                    labels: labels,
                    datasets: [{
                        label: '响应时间 (ms)',
                        data: responseTimeData,
                        borderColor: '#28a745',
                        backgroundColor: 'rgba(40, 167, 69, 0.1)',
                        borderWidth: 2,
                        tension: 0.4
                    }, {
                        label: 'AI推理时间 (s)',
                        data: inferenceTimeData,
                        borderColor: '#ffc107',
                        backgroundColor: 'rgba(255, 193, 7, 0.1)',
                        borderWidth: 2,
                        tension: 0.4
                    }]
                },
                options: {
                    responsive: true,
                    plugins: {
                        legend: {
                            display: true,
                            position: 'bottom'
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            grid: {
                                color: 'rgba(255, 255, 255, 0.1)'
                            },
                            ticks: {
                                color: '#666'
                            }
                        },
                        x: {
                            grid: {
                                display: false
                            },
                            ticks: {
                                color: '#666'
                            }
                        }
                    }
                }
            });
        }

        // 用户活动图表
        function initUserActivityChart() {
            const ctx = document.getElementById('userActivityChart').getContext('2d');

            new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: ['00:00-04:00', '04:00-08:00', '08:00-12:00', '12:00-16:00', '16:00-20:00', '20:00-24:00'],
                    datasets: [{
                        label: '用户活跃度',
                        data: [5, 8, 25, 35, 28, 15],
                        backgroundColor: 'rgba(102, 126, 234, 0.6)',
                        borderColor: '#667eea',
                        borderWidth: 2
                    }]
                },
                options: {
                    responsive: true,
                    plugins: {
                        legend: {
                            display: false
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            grid: {
                                color: 'rgba(255, 255, 255, 0.1)'
                            },
                            ticks: {
                                color: '#666'
                            }
                        },
                        x: {
                            grid: {
                                display: false
                            },
                            ticks: {
                                color: '#666'
                            }
                        }
                    }
                }
            });
        }

        // AI准确性图表
        function initAccuracyChart() {
            const ctx = document.getElementById('accuracyChart').getContext('2d');

            new Chart(ctx, {
                type: 'radar',
                data: {
                    labels: ['血管识别', '出血检测', '溃疡识别', '炎症评估', '严重程度分级'],
                    datasets: [{
                        label: 'AI模型准确性',
                        data: [95, 92, 88, 94, 91],
                        backgroundColor: 'rgba(118, 75, 162, 0.2)',
                        borderColor: '#764ba2',
                        borderWidth: 2,
                        pointBackgroundColor: '#764ba2',
                        pointBorderColor: '#fff',
                        pointHoverBackgroundColor: '#fff',
                        pointHoverBorderColor: '#764ba2'
                    }]
                },
                options: {
                    responsive: true,
                    plugins: {
                        legend: {
                            display: false
                        }
                    },
                    scales: {
                        r: {
                            beginAtZero: true,
                            max: 100,
                            grid: {
                                color: 'rgba(255, 255, 255, 0.1)'
                            },
                            pointLabels: {
                                color: '#666',
                                font: {
                                    size: 12
                                }
                            },
                            ticks: {
                                color: '#666',
                                backdropColor: 'transparent'
                            }
                        }
                    }
                }
            });
        }

        // 加载告警
        function loadAlerts() {
            // 生成模拟告警
            const alerts = [
                {
                    level: 'info',
                    message: 'AI模型性能监控正常',
                    time: new Date(Date.now() - 1000 * 60 * 30).toLocaleTimeString('zh-CN')
                },
                {
                    level: 'warning',
                    message: '数据库连接池使用率达到75%',
                    time: new Date(Date.now() - 1000 * 60 * 60).toLocaleTimeString('zh-CN')
                },
                {
                    level: 'critical',
                    message: '检测到异常登录尝试',
                    time: new Date(Date.now() - 1000 * 60 * 60 * 2).toLocaleTimeString('zh-CN')
                }
            ];

            const alertList = document.getElementById('alertList');
            alertList.innerHTML = '';

            alerts.forEach(alert => {
                const alertDiv = document.createElement('div');
                alertDiv.className = `alert-item alert-${alert.level}`;

                const severityIcon = {
                    info: 'ℹ️',
                    warning: '⚠️',
                    critical: '🚨'
                };

                alertDiv.innerHTML = `
                    <div class="alert-message">
                        ${severityIcon[alert.level]} ${alert.message}
                    </div>
                    <div class="alert-time">${alert.time}</div>
                `;

                alertList.appendChild(alertDiv);
            });
        }

        // 开始实时更新
        function startRealTimeUpdates() {
            // 每30秒更新一次数据
            setInterval(() => {
                updateMetrics();
                updateSystemStatus();
            }, 30000);

            // 每5分钟更新一次告警
            setInterval(() => {
                loadAlerts();
            }, 300000);
        }

        // 刷新仪表板
        function refreshDashboard() {
            updateMetrics();
            updateSystemStatus();
            loadAlerts();
            updateLastUpdateTime();

            // 显示刷新提示
            const toast = document.createElement('div');
            toast.style.cssText = `
                position: fixed;
                top: 20px;
                right: 20px;
                background: rgba(255, 255, 255, 0.9);
                color: #333;
                padding: 15px 20px;
                border-radius: 8px;
                box-shadow: 0 4px 12px rgba(0,0,0,0.15);
                z-index: 1000;
                animation: slideIn 0.3s ease;
            `;
            toast.textContent = '🔄 数据已更新';
            document.body.appendChild(toast);

            setTimeout(() => {
                toast.style.animation = 'slideOut 0.3s ease';
                setTimeout(() => {
                    document.body.removeChild(toast);
                }, 300);
            }, 2000);
        }

        // 更新最后更新时间
        function updateLastUpdateTime() {
            const now = new Date();
            document.getElementById('lastUpdate').textContent = now.toLocaleString('zh-CN');
        }

        // 添加动画样式
        const style = document.createElement('style');
        style.textContent = `
            @keyframes slideIn {
                from {
                    transform: translateX(100%);
                    opacity: 0;
                }
                to {
                    transform: translateX(0);
                    opacity: 1;
                }
            }

            @keyframes slideOut {
                from {
                    transform: translateX(0);
                    opacity: 1;
                }
                to {
                    transform: translateX(100%);
                    opacity: 0;
                }
            }
        `;
        document.head.appendChild(style);

        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', initDashboard);

        // 监听时间选择器变化
        document.getElementById('diagnosisTimeRange')?.addEventListener('change', (e) => {
            console.log('诊断时间范围变更:', e.target.value);
            // 这里可以根据选择的时间范围重新加载数据
        });

        document.getElementById('performanceTimeRange')?.addEventListener('change', (e) => {
            console.log('性能时间范围变更:', e.target.value);
        });

        document.getElementById('activityTimeRange')?.addEventListener('change', (e) => {
            console.log('活动时间范围变更:', e.target.value);
        });

        document.getElementById('accuracyTimeRange')?.addEventListener('change', (e) => {
            console.log('准确性时间范围变更:', e.target.value);
        });
    </script>
</body>
</html>